<template>
  <view class="container">
    <unicloud-db ref="udb" :where="where" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
        <uni-list>
          <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
            <template v-slot:body>
              <!-- <text> -->
                <!-- 此处默认显示为_id，请根据需要自行修改为其他字段 -->
                <!-- 如果使用了联表查询，请参考生成的 admin 项目中 list.vue 页面 -->
                <!-- {{item._id}} -->
              <!-- </text> -->
               <view class="list-wrapper">
                <view class="list-avatar-view">
                  <img class="list-avatar-img" :src="item.avatarfile.url"/>
                </view>
                <view class="list-content">{{ item.title }}</view>
                <!-- 使用标签来显示状态信息↓ -->
                <uni-tag :text="status[item.status].text" :type="status[item.status].type"/>
               </view>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <!-- 注：“fab”这个词是“浮动操作按钮”（Floating Action Button）的英文缩写，通常用于移动应用中提供快速访问常用功能的方式↓ -->
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="handlerForUserClickFabButton" />
  </view>
</template>

<script>
  const db = uniCloud.database()
  export default {
    data() {
      return { // 注：下面的这一行被注释的原始代码中没有把“user_Id”字段包含在内这样会导致where条件不起作用，所以这里手动添加了“user_Id”字段。
        // collectionList: [ db.collection('food-list').field('category_id,title,content,avatarfile').getTemp(),db.collection('opendb-mall-categories').field('name as text, _id').getTemp() ],
        // collectionList: [ db.collection('food-list').field('category_id,title,content,avatarfile,user_Id').getTemp(),db.collection('opendb-mall-categories').field('name as text, _id').getTemp() ],
        collectionList: [ db.collection('food-list').field('category_id,title,content,avatarfile,user_id,status').getTemp(),db.collection('opendb-mall-categories').field('name as text, _id').getTemp() ],
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: '',
        },
        status:[
          {"value":0,"text":"审核中","type":"primary"},
          {"value":1,"text":"已发布","type":"success"},
          {"value":2,"text":"审核未通过","type":"error"},
        ],
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    computed:{
      where() {
        let userId = uniCloud.getCurrentUserInfo().uid
        console.log(userId); // 68a8284d8a5c782a2b091062           
        // return `userId=="${userId}"` // 原始代码中的字段名是“userId”，但是实际上在数据库中用的是“user_id”（注意：此处“userid”的命名方式是下划线式而非驼峰式命名，并且需要纠正id的大小写，此处应为“user_id”）。
        return `user_id=="${userId}"` 
      }
    },
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
      /**
       * 函数“handlerForUserClickFabButton”被用于处理用户点击浮动操作按钮的事件
       */
      handlerForUserClickFabButton() {
        // 打开新增页面
        // uni.navigateTo({
        // 注：由于使用“uni.navigateTo”方法时不能跳转到“navbar”页面（点击按钮后控制台报错说“{errMsg: 'navigateTo:fail can not navigateTo a tabbar page'}”），因此这里使用“uni.reLaunch”方法跳转到新增页面↓
        uni.reLaunch({
          url: './add',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      }
    }
  }
</script>

<style>
.list-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}
.list-avatar-view {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}
.list-avatar-img {
  width: 100%;
  height: 100%;
  /* “object-fit:cover”的作用是确保图片能够完全填充容器，同时保持其宽高比不变。如果图片的尺寸与容器的尺寸不一致，则会根据需要进行裁剪或拉伸，以确保图片在容器中完整显示且不失真↓ */
  object-fit: cover;
}
.list-content {
  flex: 1;
}
</style>
